<template>
  <!-- 自定义图标 -->
  <van-popup class="poster-popup" v-model="showPopup" closeable>
    <div class="poster-popup-contanier">
      <div class="img"><img :src="qrcode" alt="" /></div>
      <van-button
        class="title"
        @click="saveImg()"
        color="#fff"
        plain
        hairline
        round
        >保存图片</van-button
      >
    </div>
  </van-popup>
</template>

<script>
import Vue from 'vue'
import { Popup } from 'vant'
import small from '@/smallapp/small'

Vue.use(Popup)
export default Vue.extend({
  props: {
    qrcode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showPopup: false,
    }
  },
  methods: {
    saveImg() {
      small.saveImage(this.qrcode)
    },
  },
})
</script>
<style lang="scss">
.poster-popup {
  width: 560px;
  background: transparent;
  .img {
    min-height: 500px;
    background: #fec7c2;
    img {
      width: 100%;
    }
  }
  .title {
    display: block;
    font-size: 30px;
    width: 210px;
    height: 72px;
    margin: 32px auto;
    background: transparent;
  }
  .van-popup__close-icon {
    font-size: 28px;
    color: #9d3434;
  }
}
</style>